<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #div {
            border: 1px solid;
        } */
    </style>
</head>

<body>
    <div id="div">
        <h1 id="h1" style="color: aqua;">这是标题1</h1>
        <h2 id="h2">这是标题2</h2>
        <h3 id="h3">这是标题3</h3>
        <h4 class="h4">这是标题4</h4>
        <a id="a" href="www.baidu.com">百度</a>
        <button type="button" onclick="document.getElementById('h3').style.color = 'red'"></button> 姓名: <input type="text" id="name" />
        <input type="button" onclick="hello()" value="确定"> 字段1：
        <input type="text" id="field1" value="hello world">
        <br /> 字段2：
        <input type="text" id="field2" ondblclick="this.value=''">
        <button ondblclick="document.getElementById('field2').value = document.getElementById('field1').value">拷贝</button>
        <span>(双击此按钮拷贝)</span>
    </div>
</body>
<script type="text/javascript">
    function hello() {
        var name = document.getElementById("name").value;
        if (name == "") {
            alert("请输入你的姓名");
            return false;
        } else {
            alert(name + "你好");
        }
    }
    console.info(document.URL)
    console.warn("警告")
    console.dir(document)
    document.getElementById("h1").innerHTML = "这是改过的标题";
    var a = document.getElementById("h2");
    var b = document.getElementById("div");
    var c = document.getElementsByClassName("h4")
    for (let i = 0; i < c.length; i++) {
        c[i].innerHTML = "这是新的标题4";
        c[i].style.backgroundColor = "red";
    }
    document.getElementById("a").href = "cnblogs.com/hotrod-mh/";
    document.getElementById("a").style.fontSize = "30px";
    var d = document.getElementsByTagName("button");
    console.log(document.write(d.length))

    var d = (elements, console, sourcse, network, performce, memory, application, security, lighthouse) => {
        this.elements = elements;
        this.console = console;
        this.sourcse = sourcse;
        this.network = network;
        this.performance = performance;
        this.memory = memory;
        this.application = application;
        this.security = security;
        this.lighthouse = lighthouse;
    }
    console.log(a.nextSibling)
    console.log(b.childNodes)
    console.log(b.firstChild)
    console.log(b.nodeType)
    console.log(a.parentElement)

    document.write("<h1 style = 'font-size:50px'>this is my web</h1>")
    document.write("<div style = 'border: 1px solid red'>this is my web</div>")
</script>

</html>